<template>
  <div>
    <el-row :gutter="12" style="height: 758px;">
      <el-col :span="12">
        <el-card >
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div>
            <div style="display:flex;margin:10px 0;"><span
                style="width:150px;text-align: right;padding-right: 5px;;line-height: 32px">服务:</span>
              <el-tag>{{ `redis` }}</el-tag>
            </div>
            <div style="display:flex;margin:10px 0;"><span
                style="width:150px;text-align: right;padding-right: 5px;;line-height: 32px">OS:</span>
              <el-tag>{{`ubuntu`}}}</el-tag>
            </div>
            <div style="display:flex;margin:10px 0;"><span
                style="width:150px;text-align: right;padding-right: 5px;line-height: 32px;">内存:</span>
              <div style="line-height: 32px;">{{`1.2Mb`}}</div>
            </div>
          </div>
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <span>命中率 </span>
          </div>
          <div>
            <ve-pie :data="chartData" height="400px"></ve-pie>
          </div>
        </el-card>


      </el-col>
      <el-col :span="12" style="height: 100%;padding-bottom: 13px">
        <el-card style="height: 100%; ">
          <div slot="header" class="clearfix">
            <span>工具</span>
          </div>
          <div>
            <el-form>
              <el-form-item>
                <el-input placeholder="key"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="value"></el-input>
              </el-form-item>

              <div style="text-align: right;margin-bottom: 10px">
                <el-button type="primary">提交</el-button>
              </div>

              <el-form-item>
                <el-input type="textarea" :rows="10"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>热点Key TOP20</span>
          </div>
          <div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress @click="handlerClick" :text-inside="true" :stroke-width="18" :percentage="100"
                           status="success"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="80"
                           color="rgba(142, 113, 199, 0.7)"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="50"
                           status="exception"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>大Key TOP20</span>
          </div>
          <div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress @click="handlerClick" :text-inside="true" :stroke-width="18" :percentage="100"
                           status="success"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="80"
                           color="rgba(142, 113, 199, 0.7)"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="50"
                           status="exception"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>慢Key TOP20</span>
          </div>
          <div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress @click="handlerClick" :text-inside="true" :stroke-width="18" :percentage="100"
                           status="success"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="80"
                           color="rgba(142, 113, 199, 0.7)"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="50"
                           status="exception"></el-progress>
            </div>
            <div style="display:flex;margin:10px 0;"><span style="width:50px;">Key1</span>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      statistics: {},
      chartData: {
        columns: ['key', '命中率'],
        rows: [
          { 'key': 'k1', '命中率': 1393 },
          { 'key': 'k2', '命中率': 3530 },
          { 'key': 'k3', '命中率': 2923 },
          { 'key': 'k4', '命中率': 1723 },
          { 'key': 'k5', '命中率': 3792 },
          { 'key': 'k6', '命中率': 4593 }
        ]
      }
    }
  }
}
</script>

<style scoped>
 .el-link {
   padding: 10px
 }
</style>
